<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

  <meta name="description" content="描述">
  <meta name="keywords" content="关键词">
  <link rel="icon" href="">
  <link rel="shortcut icon" href="">
  <!--    <link rel="stylesheet" href="//at.alicdn.com/t/font_2052942_xzk2q3ix0w.css">-->
  <title>账号设置</title>
  <link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
  <link href="/web/lib/cropper/cropper.min.css" rel="stylesheet">
  <link href="/web/lib/cropper/sitelogo.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/font-awesome.4.6.0.css">
  <link rel="stylesheet" href="/web/public/css/public.css">
  <link rel="stylesheet" href="/web/public/css/header.css">
  <link rel="stylesheet" href="/web/public/css/footer.css">
  <link rel="stylesheet" href="/web/public/css/account.css">
  <link rel="stylesheet" href="/web/public/css/aside.css">
  <script src="/web/lib/jquery-1.12.4.min.js"></script>
  <script src="/web/public/public.js"></script>
  <script src="/web/lib/jquery.pagination.js"></script>
  <script src="/web/lib/cropper/cropper.js"></script>
  <script src="/web/lib/cropper/sitelogo.js"></script>
  <script src="/web/js/sso/sso-logout.js"></script>
</head>

<body>
  <div class="container">
    <!--这里引入header-->
    <include file="/web/html/header/header.htm" page-type="1"></include>
    <div id="main">
      <div class="aside-wrap">
        <include file="/web/html/fragment/personal-center/aside.htm"></include>
      </div>
      <div class="list-wrap">
        <div class="tab-list">
          <div class="tab-item">
            账号设置
          </div>
        </div>
        <div class="personal-info">
          <div class="top">
            <span class="register-time">注册时间：</span>
            <span class="status">账号状态：</span>
            <span class="logout">退出登录</span>
          </div>
          <div class="header-pic-wrap">
            <div class="img-wrap" data-toggle="modal" data-target="#avatar-modal">
              <img src="/web/img/noface.png" alt="">
            </div>
            <div class="nick-name">
              <span>昵称：</span>
              <span class="nick-name-text"></span>
              <input type="text">
              <span class="btn-modify">修改</span>
              <span class="btn-save-nickname">保存</span>
            </div>
          </div>
          <h6>基本信息</h6>
          <div class="other">
            <div class="item mobile">
              <div class="keyword">登录手机：</div>
              <div class="value">188****7255</div>
            </div>
            <div class="item password">
              <div class="keyword">密码：</div>
              <div class="value"><a href="/web/html/home/login.html?changepw=1">【修改】</a></div>
            </div>
            <div class="item birth">
              <div class="keyword">生日：</div>
              <div class="value">
                <input type="text" placeholder="请输入出生日期（例：1995-01-01）">
                <span class="error-sign">请输入格式为yyyy-mm-dd并且有效的日期</span>
              </div>
            </div>
            <div class="item sex">
              <div class="keyword">性别：</div>
              <div class="value">
                <div class="radio">
                  <input id="radio-1" name="radio" type="radio" value="1">
                  <label for="radio-1" class="radio-label">男</label>
                </div>
                <div class="radio">
                  <input id="radio-2" name="radio" type="radio" value="2">
                  <label for="radio-2" class="radio-label">女</label>
                </div>

              </div>
            </div>
            <div class="item unit">
              <div class="keyword">单位名称：</div>
              <div class="value">
                <input type="text" placeholder="请输入单位名称">
                <span class="error-sign">单位名称不能超过255个字</span>
              </div>
            </div>
            <div class="item depart">
              <div class="keyword">部门：</div>
              <div class="value">
                <input type="text" placeholder="请输入所在部门">
                <span class="error-sign">所在部门不能超过20个字</span>
              </div>
            </div>
            <div class="item worker">
              <div class="keyword">职务：</div>
              <div class="value">
                <input type="text" placeholder="请输入您的职务">
                <span class="error-sign">职务不能超过50个字</span>
              </div>
            </div>
            <div class="item signature">
              <div class="keyword">个人简介：</div>
              <div class="value">
                <textarea placeholder="个人简介，其他用户可见" name="" id="" cols="30" rows="10"></textarea>
                <span class="error-sign">个人简介不能超过255个字</span>
              </div>
            </div>
          </div>
        </div>
        <div class="btn save">保存</div>
      </div>
    </div>
    <include file="/web/html/footer/footer.htm"></include>
    <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog"
      tabindex="-1">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">

          <form class="avatar-form">
            <div class="modal-header">
              <button class="close" data-dismiss="modal" type="button">&times;</button>
              <h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
            </div>
            <div class="modal-body">
              <div class="avatar-body">
                <div class="avatar-upload">
                  <input class="avatar-src" name="avatar_src" type="hidden">
                  <input class="avatar-data" name="avatar_data" type="hidden">
                  <label for="avatarInput" style="line-height: 35px;">图片上传</label>
                  <button class="btn btn-danger" type="button" style="height: 35px;"
                    onclick="$('input[id=avatarInput]').click();">请选择图片
                  </button>
                  <span id="avatar-name"></span>
                  <input class="avatar-input hide" id="avatarInput" name="avatar_file" type="file">
                </div>
                <div class="row">
                  <div class="col-md-9">
                    <div class="avatar-wrapper"></div>
                  </div>
                  <div class="col-md-3">
                    <div class="avatar-preview preview-lg" id="imageHead"></div>

                  </div>
                </div>
                <div class="row avatar-btns">
                  <div class="col-md-4">
                    <div class="btn-group">
                      <button class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-90" type="button"
                        title="Rotate -90 degrees"> 向左旋转
                      </button>
                    </div>
                    <div class="btn-group">
                      <button class="btn  btn-danger fa fa-repeat" data-method="rotate" data-option="90" type="button"
                        title="Rotate 90 degrees"> 向右旋转
                      </button>
                    </div>
                  </div>
                  <div class="col-md-5" style="text-align: right;">
                    <button class="btn btn-danger fa fa-arrows" data-method="setDragMode" data-option="move"
                      type="button" title="移动">
                      <span class="docs-tooltip" data-toggle="tooltip" title=""
                        data-original-title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
                      </span>
                    </button>
                    <button type="button" class="btn btn-danger fa fa-search-plus" data-method="zoom" data-option="0.1"
                      title="放大图片">
                      <span class="docs-tooltip" data-toggle="tooltip" title=""
                        data-original-title="$().cropper(&quot;zoom&quot;, 0.1)">

                      </span>
                    </button>
                    <button type="button" class="btn btn-danger fa fa-search-minus" data-method="zoom"
                      data-option="-0.1" title="缩小图片">
                      <span class="docs-tooltip" data-toggle="tooltip" title=""
                        data-original-title="$().cropper(&quot;zoom&quot;, -0.1)">

                      </span>
                    </button>
                    <button type="button" class="btn btn-danger fa fa-refresh" data-method="reset" title="重置图片">
                      <span class="docs-tooltip" data-toggle="tooltip" title=""
                        data-original-title="$().cropper(&quot;reset&quot;)" aria-describedby="tooltip866214"></span>
                    </button>
                  </div>
                  <div class="col-md-3">
                    <button class="btn btn-danger btn-block avatar-save fa fa-save" type="button">
                      保存修改
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <script src="/web/lib/cropper/html2canvas.min.js"></script>
  <script>
    var $birthInput = $('.item.birth input'),
      $nickNameInput = $('.header-pic-wrap .nick-name input'),
      $nickNameText = $('.header-pic-wrap .nick-name .nick-name-text'),
      $unitInput = $('.item.unit input'),
      $departInput = $('.item.depart input'),
      $workerInput = $('.item.worker input'),
      $signatureTextarea = $('.item.signature textarea'),
      $headerImg = $('.header-pic-wrap .img-wrap img');
    $(function () {
      $('#personal-center-aside .aside-list .options').addClass('active');

      $nickNameInput.change(function () {
        $nickNameText.text($(this).val());
      });
      $('.btn-modify').click(function () {
        $nickNameInput.css({
          display: 'inline-block'
        });
        $nickNameText.css({
          display: 'none'
        });
        $(this).css({
          display: 'none'
        });
        $('.btn-save-nickname').css({
          display: 'inline'
        });
      });

      $('.btn-save-nickname').click(function () {
        var that = this;
        $.ajax({
          url: ports.updateNickname,
          data: {
            nickname: $nickNameInput.val()
          },
          success: function (res) {
            console.log('修改账户昵称', res);
            if (res.status == 200) {
              utils.showToast({
                title: '修改成功',
                type: 'success'
              })
              $nickNameInput.css({
                display: 'none'
              });
              $nickNameText.css({
                display: 'inline'
              });
              $(that).css({
                display: 'none'
              });
              $('.btn-modify').css({
                display: 'inline'
              });
              $('#personal-center-aside .header-img-wrap p').text(
                $nickNameInput.val());
              var updateUserInfo = userInfo;
              updateUserInfo.nickname = res.data.data;
              userInfo = updateUserInfo;
              localStorage.setItem('userInfo', JSON.stringify(userInfo));
            }
          }
        })

      });

      function setUserInfo (obj) {
        $('.personal-info .top .register-time').text('注册时间：' + obj.strAddTime.substr(0, 10));
        $('.personal-info .top .status').text('账号状态：' + (obj.userStatus == 0 ? '冻结' : obj.userStatus ==
          1 ? '正常' : obj.userStatus == 2 ? '禁言' : '账户异常'));
        $headerImg.prop('src', obj.userInfo.userpic);
        $nickNameInput.val(obj.userInfo.nickname);
        $nickNameText.text(obj.userInfo.nickname);
        $('.other .mobile .value').text(utils.formatPhoneNumber(obj.tel));
        $birthInput.val(obj.userInfo.birth);
        $('.item.sex input[value=' + obj.userInfo.sex + ']').prop('checked', true);
        $unitInput.val(obj.userInfo.company);
        $departInput.val(obj.userInfo.depart);
        $workerInput.val(obj.userInfo.worker);
        $signatureTextarea.val(obj.userInfo.userSignature);

        userInfo = obj.userInfo;
        localStorage.setItem('userInfo', JSON.stringify(userInfo));
      }

      var birthPass = true,
        unitPass = true,
        departPass = true,
        workerPass = true,
        signaturePass = true;

      $birthInput.change(function () {
        var val = $(this).val().trim();
        if (!utils.isDate(val)) {
          $(this).next('span').css({
            visibility: 'visible'
          });
          birthPass = false;
        } else {
          $(this).next('span').css({
            visibility: 'hidden'
          });
          birthPass = true;
        }
      });
      $unitInput.change(function () {
        var val = $(this).val().trim();
        if (val.length > 255) {
          $(this).next('span').css({
            visibility: 'visible'
          });
          unitPass = false;
        } else {
          $(this).next('span').css({
            visibility: 'hidden'
          });
          unitPass = true;
        }
      });
      $departInput.change(function () {
        var val = $(this).val().trim();
        if (val.length > 20) {
          $(this).next('span').css({
            visibility: 'visible'
          });
          departPass = false;
        } else {
          $(this).next('span').css({
            visibility: 'hidden'
          });
          departPass = true;
        }
      });
      $workerInput.change(function () {
        var val = $(this).val().trim();
        if (val.length > 50) {
          $(this).next('span').css({
            visibility: 'visible'
          });
          workerPass = false;
        } else {
          $(this).next('span').css({
            visibility: 'hidden'
          });
          workerPass = true;
        }
      });
      $signatureTextarea.change(function () {
        var val = $(this).val().trim();
        if (val.length > 255) {
          $(this).next('span').css({
            visibility: 'visible'
          });
          signaturePass = false;
        } else {
          $(this).next('span').css({
            visibility: 'hidden'
          });
          signaturePass = true;
        }
      });

      $.ajax({
          url: ports.getAccountInfo,
          success: function (res) {
              console.log('获取账户信息', res);

              if (res.status == 200) setUserInfo(res.data);
          }
      })
      $('.btn.save').click(function () {
        var pass = true;
        if (!birthPass) {
          pass = false;
        }
        if (!unitPass) {
          pass = false;
        }
        if (!departPass) {
          pass = false;
        }
        if (!workerPass) {
          pass = false;
        }
        if (!signaturePass) {
          pass = false;
        }
        if (pass) {
          $.ajax({
            url: ports.updateAccountInfo,
            data: {
              "sex": $('.item.sex input[type="radio"]:checked').val(),
              "birth": $birthInput.val(),
              "company": $unitInput.val(),
              "depart": $departInput.val(),
              "worker": $workerInput.val(),
              "userSignature": $signatureTextarea.val()
            },
            success: function (res) {
              console.log('修改账户信息', res);
              if (res.status == 200) {
                utils.showToast({
                  title: '修改账户信息成功',
                  type: 'success'
                })
              }
            }
          })
        }
      })
    })
  </script>

  <script src="/web/lib/axios.min.js"></script>
  <script>
    //做个下简易的验证  大小 格式
    $('#avatarInput').on('change', function (e) {
      var filemaxsize = 1024 * 5; //5M
      var target = $(e.target);
      var Size = target[0].files[0].size / 1024;
      if (Size > filemaxsize) {
        utils.showToast({
          title: '图片过大，请重新选择',
          type: 'warning'
        });
        $(".avatar-wrapper").childre().remove;
        return false;
      }
      if (!this.files[0].type.match(/image.*/)) {
        utils.showToast({
          title: '请选择正确的图片格式',
          type: 'warning'
        });
      } else {
        $('.btn.avatar-save').attr('data-dismiss', 'modal');
        var filename = document.querySelector("#avatar-name");
        var texts = document.querySelector("#avatarInput").value;
        var teststr = texts;
        testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
        filename.innerHTML = testend;
      }

    });

    $(".avatar-save").on("click", function () {
      var img_lg = document.getElementById('imageHead');
      // 截图小的显示框内的内容
      html2canvas(img_lg, {
        allowTaint: true,
        taintTest: false,
        onrendered: function (canvas) {
          canvas.id = "mycanvas";
          //生成base64图片数据
          var dataUrl = canvas.toDataURL("image/jpeg");
          $headerImg.prop('src', dataUrl);
          $('#personal-center-aside .header-img-wrap img').prop('src', dataUrl);
          imagesAjax(dataUrl)
        }
      });
    })

    function imagesAjax (src) {
      // console.log(src, utils.base64ToFormData(src).get('file'));
      /*$.ajax({
          url: ports.uploadUserImage,
          data:utils.base64ToFormData(src),
          processData: false,  // jQuery不要去处理发送的数据
          // contentType:'multipart/form-data;boundary=----WebKitFormBoundary2RMjgqDXFG0Ar2Mm',
          enctype:'multipart/form-data',
          success: function (res) {
              console.log('上传用户头像',res)
          }
      });*/
      axios({
        method: 'post',
        url: ports.uploadUserImage,
        data: utils.base64ToFormData(src),
        contentType: 'multipart/form-data;',
        responseType: 'json',
        headers: {
          'Authorization': utils.cookieUtils.getCookie("token")
        }
      }).then(function (res) {
        console.log('上传用户头像', res);
      });
    }
  </script>
</body>

</html>